import React, { useContext, useEffect, useLayoutEffect } from "react";
import { StyleProvider } from "@ant-design/cssinjs";
import { ConfigProvider } from "antd";

import { LowCodeContext } from "../core/Provider";
import LowCodeRenderer from "../core/Renderer";
import Frame, { useFrame, FrameContextConsumer } from "react-frame-component";
import { any } from "@rspack/core/compiled/zod";

const FrameStyleProvider = ({ children }) => {
  // Hook returns iframe's window and document instances from Frame context
  const { document } = useFrame();

  return (
    <StyleProvider
      container={
        document.querySelector("iframe")?.contentWindow?.window?.document?.body
      }
    >
      {children}
    </StyleProvider>
  );
};
const InnerComponent = () => {
  const { items } = useContext(LowCodeContext);

  const { document: doc } = useFrame();
  const style = () => {
    
    // setTimeout(() => {
    //   const styleHtml = document.querySelector("#style")?.innerHTML;
    //   const styleTags = document.head.querySelectorAll("style");

    //   console.log(
    //     "获取样式",
    //     document.querySelector("#style"),
    //     styleTags,
    //     styleHtml
    //   );

    //   let el: any = doc.body.querySelector("#style");
    //   if (!el) {
    //     el = document.createElement("div");
    //     el.id = "style";
    //     doc?.body.append(el);
    //   }
    //   el.innerHTML = styleHtml;
    // }, 100);
    if (doc) {
      const styleTags = document.head.querySelectorAll("style");
      if (styleTags && doc) {
          let el: any = doc.body.querySelector("#style");
      if (!el) {
        el = document.createElement("div");
        el.id = "style";
        doc?.body.append(el);
      }
      el.innerHTML = '';
        styleTags.forEach((node) => {
          const frameStyles = node.cloneNode(true);
          // doc is reference to iframe document

          el.append(frameStyles);
        });
      }

    }
  };
  // Only need to run this once on mount
  useLayoutEffect(() => {
    console.log("获取样式");
    // if (doc) {
    //   const styleTags = document.head.querySelectorAll("style");
    //   if (styleTags && doc) {
    //     styleTags.forEach((node) => {
    //       const frameStyles = node.cloneNode(true);
    //       // doc is reference to iframe document
    //       doc.head.append(frameStyles);
    //     });
    //   }

    // }
  }, [doc]);
  // if(!items.properties){
  //   return null
  // }
  // const xProps = items.properties["x-component-props"];
  // const _items = xProps.items
  // Hook returns iframe's window and document instances from Frame context

  return (
    <ConfigProvider
      getPopupContainer={() => {
        style();
        return doc?.body as any;
      }}
      getTargetContainer={() => {
        return doc?.body as any;
      }}
    >
      {/* <FrameStyleProvider> */}
      <LowCodeRenderer items={items} />
      {/* </FrameStyleProvider> */}
    </ConfigProvider>
  );
};
const LowCodeDesignerPreview = () => {
  const { items } = useContext(LowCodeContext);

  return   <div id="designer-preview">
    <ConfigProvider
    getPopupContainer={()=>{
      return document.getElementById('designer-preview') as any
    }}
    getTargetContainer={()=>{
      return document.getElementById('designer-preview') as any
    }}
    >
    <LowCodeRenderer items={items} />
  </ConfigProvider>
  </div>
  return (
    <Frame style={{ width: "100%", height: "100%", border: "none" }}>
      <InnerComponent />
    </Frame>
  );
};
export default LowCodeDesignerPreview;
